import 'package:flutter/material.dart';
import 'package:flutterapp/src/utils/date_utils.dart';

main() {
  runApp(
    MaterialApp(
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<WorkBean> _list = [
    WorkBean("部门经理", "内部调岗", "2021-01-01 20:00:00"),
    WorkBean("基层科员", "岗位升职", "2020-01-01 20:00:00"),
    WorkBean("基层安装", "新入职", "2019-10-01 20:00:00"),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("成长记录"),
      ),
      body: Container(
          padding: EdgeInsets.all(20),
          child: ListView.builder(
              itemCount: _list.length,
              itemBuilder: (BuildContext context, int index) {
                return buildItemWidget(index);
              })),
    );
  }

  Widget buildItemWidget(int index) {
    return Container(
      height: 100,
      width: double.infinity,
      child: Row(
        children: [
          // 左边的时间
          buildTimeWidget(index),
          // 中间的竖线
          buildLineWidget(index),
          // 右边的内容
          buildBodyWidget(index),
        ],
      ),
    );
  }

  buildTimeWidget(int index) {
    WorkBean workBean = _list[index];
    return Container(
      width: 60,
      margin: EdgeInsets.only(left: 80, right: 10),
      child: Column(
        children: [
          Text(
            "${HODateUtils.formatDateStr(workBean.workDate, format: "yyyy")}",
            style: TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 16,
              color: Color(0xff666666),
            ),
          ),
          Text(
            "${HODateUtils.formatDateStr(workBean.workDate, format: "MM-dd")}",
            style: TextStyle(
              fontSize: 14,
              color: Color(0xff666666),
            ),
          ),
        ],
      ),
    );
  }

  buildBodyWidget(int index) {
    WorkBean workBean = _list[index];
    return Container(
      margin: EdgeInsets.only(left: 12),
      child: Column(
        children: [
          Text(
            "${workBean.work}",
            style: TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 16,
              color: Color(0xff666666),
            ),
          ),
          Text(
            "${workBean.workFlag}",
            style: TextStyle(
              fontSize: 14,
              color: Color(0xff666666),
            ),
          ),
        ],
      ),
    );
  }

  buildLineWidget(int index) {
    Color color = Colors.grey[300];
    if (index == 0) {
      color = Colors.green;
    }
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(
          height: 4,
        ),
        ClipOval(
          child: Container(
            width: 8,
            height: 8,
            color: color,
          ),
        ),
        Expanded(
          child: Container(
            width: 1,
            color: index == _list.length - 1
                ? Colors.transparent
                : Colors.grey[300],
          ),
        ),
      ],
    );
  }
}

class WorkBean {
  //工作名称
  String work;
  //工作部门
  String workFlag;
  //变更日期
  String workDate;
  WorkBean(this.work, this.workFlag, this.workDate);
}
